<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script type="text/javascript">
	function updateVMs() {
		$.getJSON('/services/rest/system/vms/list', function(data) {
			$('#vm-list').empty();
			$.each(data.vm, function(i, vm) {
				console.log(vm);
				$('#vm-list').append(
						'<li class="ui-widget-content ui-corner-all rounded"><h3>'
								+ vm['@name'] + '</h3></li>');
			});
		});
	}

	function saveVm() {
		vm = {
			vm : {}
		};
		vm.vm['@name'] = $('#new-vm-name').val();
		vm.vm['@ram'] = $('#new-vm-memory').val();
		vm.vm['@cpus'] = $('#new-vm-processors').val();
		$.ajax({
			type : 'POST',
			url : 'services/rest/system/vms/save',
			contentType : 'application/json',
			dataType : 'json',
			data : JSON.stringify(vm),
			success : function(data, status, xhr) {
				$("#new-vm-dialog").dialog('close');
				updateVMs();
			}
		})
	}

	$(function() {

		$('#new-vm-dialog').dialog({
			autoOpen : false,
			modal : true,
			minHeight : 600,
			minWidth : 800
		});

		$('#refresh-vms').button({
			text : false,
			icons : {
				primary : 'ui-icon-arrowrefresh-1-w'
			}
		});
		$('#refresh-vms').click(updateVMs);

		$('#new-vm').button({
			text : false,
			icons : {
				primary : 'ui-icon-plus'
			}
		});
		$('#new-vm').click(function() {
			$('#new-vm-dialog').dialog('open');
		});

		$('#new-vm-save').button({
			text : false,
			icons : {
				primary : 'ui-icon-disk'
			}
		}).click(saveVm);
		$('#new-vm-properties-tabs').tabs();

		updateVMs();
	})
</script>

<div id="vms">
	<span id="vms-toolbar" class="toolbar ui-widget-header ui-corner-all">
		<button id="refresh-vms" class="button"></button>
		<button id="new-vm" class="button"></button>
		<button id="delete-vm" class="button"></button>
		<button id="shutdown-vm" class="button"></button>
		<button id="startup-vm" class="button"></button>
		<button id="migrate-vm" class="button"></button>
		<button id="edit-vm" class="button"></button>
	</span>
	<ul id="vm-list" class="selectable"></ul>
</div>

<div id="new-vm-dialog" title="New VM">
	<div id="new-vm-properties-tabs">
		<ul>
			<li><a href="#new-vm-properties-general">General</a></li>
			<li><a href="#new-vm-properties-resources">Resources</a></li>
			<li><a href="#new-vm-properties-storage">Storage</a></li>
			<li><a href="#new-vm-properties-network">Network</a></li>
			<li><a href="#new-vm-properties-console">Console</a></li>
		</ul>
		<div id="new-vm-properties-general">
			<label for="new-vm-name">vm name</label> <input id="new-vm-name"><br />
		</div>
		<div id="new-vm-properties-resources">
			<label for="new-vm-memory">memory (MB)</label> <input
				id="new-vm-memory"><br /> <label for="new-vm-processors">processors</label>
			<input id="new-vm-processors"><br />
		</div>
		<div id="new-vm-properties-storage"></div>
		<div id="new-vm-properties-network"></div>
		<div id="new-vm-properties-console"></div>
	</div>
	<button id="new-vm-save">save</button>
</div>